import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {Button, Space, Table,Popconfirm,message} from 'antd';
import type {ActionType, ProColumns} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {PlusOutlined} from '@ant-design/icons';
import {
  addGoodsStandard, changeGoodsStandard,
  delGoodsStandard, getGoodsDetails,
  getGoodsStandard
} from "@/services/ant-design-pro/goods";
import AddStandard from "./components/AddStandard"

const GoodsStandard = () => {

  const actionRef = useRef<ActionType>();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [recordData,setEditData] = useState({})  /** 一行数据*/


  const columns: ProColumns = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false,
      align: 'center',
      width: 50,
    },
    {
      title: '规格名称',
      dataIndex: 'title',
      search: false,
      align: 'center',
      width: 80,
    },
    {
      title: '商品规格',
      search: false,
      align: 'center',
      width: 80,
      render: (_, record) => {
        const data = record.content
        return (
          <div>
            {
              data.map((item, id) => {
                return <div key={id}>{item.name}</div>
              })
            }
          </div>
        )
      }
    },
    {
      title: '商品属性',
      dataIndex: 'product_name',
      search: false,
      align: 'center',
      width: 150,
      render: (_, record) => {
        const data = record.content
        return (
          <div>
            {
              data.map((item, id) => {
                return <div key={id}>{item.value + ','}</div>
              })
            }
          </div>
        )
      }
    },
    {
      title: '规格搜索',
      dataIndex: 'title',
      search: true,
      hideInTable: true,
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      fixed: 'right',
      width: 80,
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={async() => {
            const data = await getGoodsDetails(record.id);
            setEditData(data)
            setIsModalVisible(true)
          }}
        >
          编辑
        </a>,
        <Popconfirm
          title="确定要删除规格吗？"
          onConfirm={()=>{
            delGoodsStandard({
              ids: record.id
            }).then(() => {
              message.success('删除成功！')
              actionRef.current.reload();
            })
          }
          }
          onCancel={()=>{
            message.success('已取消');
          }}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>
      ],
    },
  ];
  return (
    <PageContainer
      header={{
        title: '商品规格',
        breadcrumb: {},
      }}
    >
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params) => {
          const {data, meta} = await getGoodsStandard({...params})
          return {
            data,
            meta: meta.pagination.total,
          }
          actionRef.current.reload()
        }}
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}

        tableAlertRender={({selectedRowKeys, selectedRows, onCleanSelected,alwayShowAlert}) => (
          <Space size={24}>
              <span>
                已选 {selectedRowKeys.length} 项
                <a style={{marginLeft: 8}} onClick={onCleanSelected}>
                  取消选择
                </a>
              </span>
          </Space>
        )}

        tableAlertOptionRender={(data) => {
          return (
            <Space size={16}>
              <Popconfirm
                title="确定要删除规格吗？"
                onConfirm={()=>{
                  const arr = [data.selectedRowKeys]
                  console.log(data)
                  delGoodsStandard({
                      ids:arr.toString(),
                  }).then(() => {
                    message.success('删除成功！')
                    actionRef.current.reload();
                  })
                }
                }
                onCancel={()=>{
                  message.success('已取消');
                }}
                okText="确定"
                cancelText="取消"
              >
                <a href="#">批量删除</a>
              </Popconfirm>
              <a>导出数据</a>
            </Space>
          );
        }}
        scroll={{x: 1300}}
        options={false}
        search={{
          labelWidth: 'auto',
        }}
        rowKey="id"
        headerTitle=""
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined/>} type="primary"
                  onClick={() => {
                    setEditData({})
                    setIsModalVisible(true)
                  }}
          >
            添加商品规格
          </Button>
        ]}
      />
      {isModalVisible?
        <AddStandard
          isModalVisible={isModalVisible}
          formData={recordData}
          handleCancel={() => {
            setIsModalVisible(false)
          }
          }
          handleSubmit={(values: any) => {
            console.log(values);
            if(values?.id){
              // 修改的逻辑
              changeGoodsStandard(values.id,values).then(res=>{
                setIsModalVisible(false)
                actionRef.current.reload();
              })
            }else{
              // 添加的逻辑
              addGoodsStandard(values).then(res=>{
                setIsModalVisible(false)
                actionRef.current.reload();
              })
            }


          }}
        />
        :null}

    </PageContainer>

  );
};

export default GoodsStandard;
